<template>
<div class="timeline-block">
  <el-backtop></el-backtop>
  <el-timeline>
    <el-timeline-item placement="top"
    v-for="(diary,did) in diaryList"
    :key="diary.did"
    :timestamp="diary.editTime">

      <el-card class = "card">
        <div><h4>{{diary.title}}</h4></div>
        <div v-html="highLightKeyword(diary.content,keyword)"><p>{{diary.content}}</p></div>
        <div><el-button @click="gotoWrite(diary.did,2)" plain
         size="mini" style="margin-top: 3%;">编辑日记</el-button>
        <el-button @click="deleteDiary(diary.did)" type="danger" plain
         size="mini" style="margin-top: 3%;">删除日记</el-button></div>
      </el-card>
      </el-timeline-item>
  </el-timeline>
    </div>
</template>

<script>
  import axios from 'axios'
  import Login from '../Jun/Login.vue'
  import Home from '../Jun/Home.vue'

  export default {
    data(){
      return{
        uid:'',
        keyword:'',
        diaryList:[{
          did:'',
          title:'',
          content:'',
          editTime:'',
          state:2
        }]
      }
    },

    mounted(){
      var _this = this;
      _this.uid = localStorage.getItem('user_id');
      var token = localStorage.getItem("token");
      //向后端发送content,uid,state
      axios.post('http://oneday.vaiwan.com/diary/contentLike',{
        content:_this.keyword,
        uid:_this.uid,
        state:2
      },{headers:{
          token:`${token}`},
          }).then(function(response){
        /*
        成功时返回data数组
        */
       _this.diaryList = response.data.data;
      }).catch(function(error){
      alert("请重新登录！");
      _this.$router.push("/");
      })
    },

    methods:{
      getContent(){
        var _this = this;
        _this.keyword = decodeURI(this.$route.query.searchContent);
        //console.log(_this.keyword);  测试用
      },
      gotoWrite(did,state){
        this.$router.push({
          path:'/write',
          query:{did:did,
          state:state}
        });
      },
      deleteDiary(did){
        var _this = this;
        var token = localStorage.getItem("token");
        //向后端发送请求，进入回收站，不需要发送state
          axios.post('http://oneday.vaiwan.com/diary/delete', {
            did:did,
              },{headers:{
          token:`${token}`},
          })
              .then(function(response){
                //成功时返回response数据
                /*
                did:""
                state:"1"
                eiditTime:""
                */
               alert("删除成功！");
               _this.$router.replace("/recycle");
              })
              .catch(function(error){
                alert("请重新登录！");
                _this.$router.push("/");
              });
        },
        highLightKeyword(diarycontent,searchword){
          var _this = this;
          if(diarycontent.indexOf(searchword) !== -1 && searchword !== '' ){
                           return diarycontent.replace(searchword, `<span style="color:red;">${searchword}</span>`);
                     }else if(diarycontent.indexOf("/n") !== -1){
                       return diarycontent.replace("/n", `
                       `)
                     }else{
                           return diarycontent;
                     }
        }
    },

    created(){
      this.getContent();
    }
}
</script>

<style>
  .card{
    white-space: pre-line;
  }
</style>>
